import { ProChat } from '@ant-design/pro-chat';
import './App.css'

function App() {
  const mockStreamResponse = async (messages) => {
    const result = await fetch("http://127.0.0.1:8000/chat", {
      method: "POST",
      headers: {
        "Content-Type": "text/plain"
      },
      body: messages[messages.length - 1].content
    }).then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      
      return response.text();
    }).catch((error) => {
      console.error('There has been a problem with your fetch operation:', error);
      return "";
    });
    
    // return new Response(
    //   new ReadableStream({
    //     async start(controller) {
    //       for (const char of result.split('')) {
    //         await new Promise((r) => setTimeout(r, 50));
    //         controller.enqueue(new TextEncoder().encode(char));
    //       }
    //       controller.close();
    //     }
    //   })
    //);

    return JSON.parse(`${result}`)
  };

  return (
    <ProChat
      helloMessage="👋 输入消息开始对话"
      request={mockStreamResponse}
      style={{ height: '95vh', width: '1000px', textAlign: 'left' }}
    />
  );
}

export default App